<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/index.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link rel='stylesheet' href='https://unicons.iconscout.com/release/v2.1.9/css/unicons.css'>
    <link href="css/codemirror/codemirror.css" rel="stylesheet">
    <link href="css/codemirror/ambiance.css" rel="stylesheet">
    <link href="css/index01.css" rel="stylesheet">
    <link href="css/loading.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/foot.css" />
    <style>
        html {
            font-family: 微软雅黑, serif;
            color: #333333;
        }

        a {
            color: #1D8CE0;
            cursor: pointer;
        }

        * {
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script>
        function login(){
            if (document.getElementById("login").style.display==="none") {
                document.getElementById("login").style.display="block";
            }else {
                document.getElementById("login").style.display="none";
            }
        }
    </script>
</head>
<body style="background: #eee;">
<div class="container" style="width: 100%;margin: 0px;padding:0;border: none  ">
    <!--default默认主题 暗色调inverse-->
    <nav class="navbar navbar-default" style="background: #ddd">
        <div class="navbar-header col-md-1" style="margin-right:10px;">
            <a href="#" class="navbar-brand">悦知</a>
        </div>
        <div id="nav1" class="collapse navbar-collapse col-md-12">
            <ul class="nav navbar-nav">
                <!--active加深-->
                <li><a href="index.html">首页</a></li>
                <li><a href="questionbank.html">题库广场</a></li>
                <li><a href="programeonline.html">在线编译</a></li>
                <li><a href="testinfo.html">能力测试</a></li>
                <li><a href="#">排行榜</a></li>
                <li><a href="personinfo.html"style="margin-left: 720px">个人中心</a></li>
            </ul>
            <!--搜索框-->
            <form action="" class="navbar-form navbar-right" >
                <input type="text" placeholder="搜索" class="form-control"/>
                <a class="btn btn-primary">搜索</a>
            </form>
        </div>
    </nav>
</div>
<div style="margin-left: 2%;height:800px;display: flex;background: beige ;width:96%;" >
<!--    <div class="col-md-5" style="padding:0px;background: #EEE" >-->
<!--        <h4 style="padding: 10px;font-weight: bold;border-bottom: 1px black solid">题目详情</h4>-->
<!--        <div style="padding:10px; ">-->
<!--            <span>三数之和</span>-->
<!--            <div style="padding-top: 10px;">给你一个包含n个整数的数组nums，判断nums中是否存在三个元素a，b，c，使得a+b+c=0？请你找出所有满足条件且不重复的三元组。</div>-->
<!--            <div style="padding-top: 10px;padding-bottom: 30px;"> 注意：答案中不可以包含重复的三元组。</div>-->
<!--            <span>示例</span>-->
<!--            <div  style="height: 300px;background: #ddd"></div>-->
<!--        </div>-->
<!--        <h4 style="margin: 10px">编译结果</h4>-->
<!--        <div style="height: 230px; background: #ddd;margin: 10px;"></div>-->
<!--    </div>-->
    <div class="col-md-12" style="background: white">
        <div class="ibox ">
            <h4 style="padding: 10px;font-weight: bold;">编码区</h4>
            <div class="ibox-content">
                    <textarea id="code1">
                    <script>
                        function animationHover(element, animation) {
                            element = $(element);
                            element.hover(
                                function () {
                                    element.addClass('animated ' + animation);
                                },
                                function () {
                                    //wait for animation to finish before removing classes
                                    window.setTimeout(function () {
                                        element.removeClass('animated ' + animation);
                                    }, 2000);
                                });
                        }
                    </script>
                    </textarea>
            </div>
            <h4 style="padding: 10px;font-weight: bold;">运行结果</h4>
            <div style="height: 150px;background: #ddd;"></div>
        </div>
    </div>
    </div>
</div>
<div style="float: right;margin-right: 2%;">
    <button class="btn-info" style="width: 100px;height: 40px;border: none;margin-top: 10px;">点击运行</button>

    <button class="btn-info" style="width: 100px;height: 40px;border: none;margin-top: 10px;">提交</button>
</div>

<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script src="js/codemirror.js"></script>
<script src="js/mode/clike/clike.js"></script>

<script>
    $(document).ready(function () {

        var editor_one = CodeMirror.fromTextArea(document.getElementById("code1"), {
            lineNumbers: true,
            matchBrackets: true,
            styleActiveLine: true,
            theme: "ambiance"

        });
        editor_one.setSize("", "550px");


        var editor_two = CodeMirror.fromTextArea(document.getElementById("code2"), {
            lineNumbers: true,
            matchBrackets: true,
            styleActiveLine: true

        });
        editor_one.setSize("", "550px");


    });
</script>
</body>
</body>
</html>